import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtIcon, AtAvatar, AtRate, AtTextarea, AtButton } from 'taro-ui'
import { useState, useEffect } from 'react'
import env from '../../../store/env.config'
import '../index.scss'

const MyComment = ({ recode }) => {
  const [isOpened, setIsOpened] = useState(false)
  const [commentTextValue, setCommentTextValue] = useState('')
  const [rateSource, setRateSource] = useState(0)
  const [comment, setComment] = useState([])
  const [userInfo, setUserInfo] = useState({} as any)

  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: (userData) => {
        setUserInfo(userData.data)
      },
    })
  }, [])

  useEffect(() => {
    getEva()
  }, [userInfo])

  const getEva = () => {
    Taro.request({
      url: `${env.domain}/eva/list`,
      method: 'GET',
      data: {
        goodsId: recode.id,
        token: userInfo['auth'],
      },
      success: (res) => {
        if (res.data['code'] === 200 && res.data.data !== null) {
          setComment([...res.data.data.recode] as any)
        }
      },
    })
  }

  const submitEva = () => {
    Taro.request({
      url: `${env.domain}/eva/add?token=${userInfo['auth']}`,
      method: 'POST',
      data: {
        goodsId: recode.id,
        userId: userInfo.id,
        remark: commentTextValue,
        source: rateSource,
      },
      success: (res) => {
        if (res.data['code'] === 200) {
          getEva()
        }
      },
    })
  }
  return (
    <View className='comment-box'>
      <View>
        <AtButton
          type='primary'
          onClick={() => {
            if (isOpened && !!commentTextValue) {
              console.log(commentTextValue)
              console.log(rateSource)
              submitEva()
            }
            setIsOpened(true)
          }}
        >
          {isOpened ? '发布评论' : '我要评论'}
        </AtButton>
        {isOpened && (
          <>
            <AtRate
              value={rateSource}
              onChange={(val: any) => setRateSource(val)}
            />
            <AtTextarea
              className='AtTextarea'
              value={commentTextValue}
              onChange={(val) => setCommentTextValue(val)}
              maxLength={200}
              placeholder='输入你的评论...'
            />
          </>
        )}
      </View>
      <View className='context at-row at-row__align--end'>
        <View className='my-title at-col at-col-2'>评价</View>
        <View className='at-col at-col-1 title-text'>10万+</View>
        <View className='at-col at-col-6' />
        <View className='at-col at-col-3 title-text'>
          好评度97%
          <AtIcon value='chevron-right' size='15' color='#F00'></AtIcon>
        </View>
      </View>
      {comment.map((item, index) => {
        return <CommentItem key={index} {...item} />
      })}
    </View>
  )
}

const CommentItem = (props) => {
  const { source, remark, userEntity } = props
  return (
    <View>
      <View className='context at-row at-row__align--center'>
        <View className='at-col at-col-2'>
          <AtAvatar size='small' circle image={userEntity.avatar}></AtAvatar>
        </View>
        <View className='at-col at-col-10'>
          <View className='auther-text'>{userEntity.username}</View>
          <View className='at-row'>
            <View className='at-col at-col-4'>
              <AtRate value={source > 5 ? 5 : source} max={5} size={15} />
            </View>
            <View className='at-col at-col-1 title-text'>
              {source > 5 ? 5 : source}分
            </View>
          </View>
        </View>
      </View>
      <View className='auther-text context text-p'>{remark}</View>
    </View>
  )
}

export default MyComment
